<template>
  <div class="exhibit-container box">
    <div class="container-table">
      <el-row>
        <el-col :span="18">
          <el-input
            :disabled="!checked"
            v-model="goodsCode"
            @change="getGoodsByCode"
            placeholder="请扫描商品条码"
            size="large"
            style="width: 15rem"
          ></el-input>

          <el-checkbox v-model="checked">手动输入条码</el-checkbox>
          <UploadExecl>
            <el-button type="primary" link class="execl"
              >导入execl文件</el-button
            >
            <!-- <span class="execl">导入execl文件</span> -->
          </UploadExecl>
        </el-col>
        <el-col :span="18">
          <el-table :data="GoodsList" border style="width: 100%; height: 20rem">
            <el-table-column prop="goods_id" label="流水号" />
            <el-table-column prop="goods_code" label="条码" />
            <el-table-column prop="goods_name" label="商品名称" />
            <el-table-column prop="goods_unit" label="单位" />
            <el-table-column prop="reserve_add" label="上货数量">
              <template #default="scope">
                <el-input-number
                  v-model="scope.row.reserve_add"
                  size="small"
                  :min="1"
                  controls-position="right"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="updateGoodsList">确定</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { reqGetGoodsByCode, reqUpdateGoodsList } from '@/api/goods'
import UploadExecl from '@/components/UploadExecl'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
const checked = ref(true)
// 上货
const GoodsList = reactive([])
const updateGoodsList = async () => {
  const goodsList = []
  GoodsList.forEach((e) => {
    const goods = {
      goods_id: e.goods_id,
      goods_reserve: e.reserve_add + e.goods_reserve
    }
    goodsList.push(goods)
  })
  const result = await reqUpdateGoodsList(goodsList)
  if (result.code === 200) {
    GoodsList.length = 0
    ElMessage({
      message: '上货成功！',
      type: 'success'
    })
  } else {
    ElMessage({
      message: '上货失败！',
      type: 'warning'
    })
  }
}
// 通过条码获取商品信息
const goodsCode = ref('')
const getGoodsByCode = async () => {
  const result = await reqGetGoodsByCode({ code: goodsCode.value })
  if (result.code === 200) {
    const { data } = result
    const goods = {
      goods_code: data.goods_code,
      goods_id: data.goods_id,
      goods_name: data.goods_name,
      goods_reserve: data.goods_reserve,
      reserve_add: 1,
      goods_unit: data.goods_unit
    }
    const flag = checkCode(goods)
    goodsCode.value = ''
    if (flag) {
      GoodsList.push(goods)
      ElMessage({
        message: '添加成功！',
        type: 'success'
      })
    } else {
      ElMessage({
        message: '重复添加！',
        type: 'warning'
      })
    }
  } else {
    goodsCode.value = ''
    ElMessage({
      message: '添加失败！',
      type: 'warning'
    })
  }
}
// 检查是否有重复的code
const checkCode = (goods) => {
  let flag = true
  GoodsList.forEach((e) => {
    if (goods.goods_id === e.goods_id) {
      flag = false
      return null
    }
  })
  return flag
}
</script>

<style lang="scss" scoped>
.exhibit-container {
  height: 38rem;
  .el-col:first-child {
    position: relative;
    padding: 1rem 10rem;
    .el-checkbox {
      margin-left: 1rem;
    }
  }
  .el-col:nth-child(2) {
    margin-top: 2rem;
    padding-left: 10rem;
  }
  .el-col:last-child {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    .el-button {
      width: 10rem;
    }
  }

  .execl {
    position: absolute;
    right: 0rem;
    top: 1.5rem;
  }
}
</style>
